<template>
	<view class="news-container">
		<!-- 顶部导航栏 -->
		<view class="nav-wrapper">
			<scroll-view 
				class="nav-scroll" 
				scroll-x="true" 
				show-scrollbar="false"
				scroll-with-animation
			>
				<view class="nav-tabs">
					<view 
						v-for="(item, index) in newsTabs" 
						:key="index"
						class="nav-item"
						:class="{ active: currentTab === index }"
						@click="switchTab(index)"
					>
						<text class="nav-text">{{ item }}</text>
						<view v-if="currentTab === index" class="nav-indicator"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 天气和搜索区域 -->
		<view class="top-section">
			<view class="weather-card" @click="refreshWeather">
				<view class="weather-left">
					<view class="temperature-box">
						<text class="temperature">{{ weatherData.temperature }}°</text>
						<text class="weather-status">{{ weatherData.weather }}</text>
					</view>
					<view class="location-box">
						<view class="location">
							<text class="location-icon">📍</text>
							<text class="city-name">{{ weatherData.city }}</text>
						</view>
						<view class="air-quality">
							<text class="air-icon">🌱</text>
							<text class="pm-text">PM2.5 {{ weatherData.pm25 }}</text>
						</view>
					</view>
				</view>
				<view class="weather-right">
					<view class="refresh-info" @click.stop="refreshWeather">
						<text class="refresh-time">{{ weatherRefreshText }}</text>
						<text class="refresh-icon">🔄</text>
					</view>
					<view class="weather-extra">
						<text class="extra-item">💧 {{ weatherData.humidity }}</text>
						<text class="extra-item">🌬️ {{ weatherData.wind }}</text>
					</view>
				</view>
			</view>

			<view class="search-card">
				<view class="search-wrapper">
					<view class="search-icon-wrapper">
						<text class="search-icon">🔍</text>
					</view>
					<input 
						v-model="searchKeyword" 
						class="search-input"
						placeholder="搜索新闻、资讯、作者..."
						placeholder-class="search-placeholder"
						@confirm="searchNews"
						@input="onSearchInput"
						:focus="searchFocus"
					/>
					<view v-if="searchKeyword" class="clear-wrapper" @click="clearSearch">
						<text class="clear-btn">×</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 刷新提示 -->
		<view v-if="showRefreshTip" class="refresh-tip">
			<view class="tip-content">
				<text class="tip-icon">✨</text>
				<text class="tip-text">已为您更新 {{ updateCount }} 条新内容</text>
			</view>
		</view>

		<!-- 内容列表 -->
		<scroll-view 
			scroll-y="true" 
			class="content-scroll"
			@scrolltolower="loadMore"
			@refresherrefresh="onRefresh"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
			:show-scrollbar="false"
		>
			<view class="content-list">
				<view v-for="(item, index) in displayList" :key="item.nId || item.id" class="list-item">
					<!-- 新闻卡片 -->
					<cardViewText 
						v-if="item.type === 'news' || !item.type"
						:imgindex="index" 
						:images="image" 
						:title="item.title" 
						:isTop="item.isTop" 
						:author="item.author || item.source" 
						:comments="item.comments" 
						:time="item.time || item.date" 
						:mode="item.mode || (item.hasImage ? 2 : 1)"
						@click="goToNewsDetail(item)"
						@comment="handleComment(item)"
						@follow="handleFollow(item)"
					>
						<template v-slot:tips v-if="item.showSearch">
							<view class="search-tips">
								<view class="tips-header">
									<text class="tips-title">相关搜索</text>
								</view>
								<view class="tags-container">
									<view class="tag-item">
										<text class="tag-icon">🔍</text>
										<text class="tag-text">今日金价</text>
									</view>
									<view class="tag-item">
										<text class="tag-icon">🔍</text>
										<text class="tag-text">精选好物</text>
									</view>
									<view class="tag-item">
										<text class="tag-icon">🔍</text>
										<text class="tag-text">投资理财</text>
									</view>
								</view>
							</view>
						</template>
					</cardViewText>

					<!-- 广告卡片 -->
					<view v-else-if="item.type === 'ad'" class="advertisement-card" @click="handleAdClick(item)">
						<view class="ad-header">
							<view class="ad-badge">
								<text class="ad-label">广告</text>
								<text class="ad-sponsor">{{ item.source }}</text>
							</view>
							<view class="ad-action">
								<text class="action-btn">赞助</text>
							</view>
						</view>
						<view class="ad-content">
							<text class="ad-title">{{ item.title }}</text>
							<view class="ad-images">
								<image 
									v-for="(img, imgIndex) in item.images" 
									:key="imgIndex" 
									:src="getImageUrl(img)" 
									class="ad-image"
									mode="aspectFill"
									:lazy-load="true"
								/>
							</view>
						</view>
						<view class="ad-footer">
							<text class="footer-text">点击查看详情</text>
						</view>
					</view>
				</view>
				
				<!-- 无搜索结果 -->
				<view v-if="searchKeyword && displayList.length === 0" class="empty-state">
					<view class="empty-icon">🔍</view>
					<text class="empty-title">未找到相关内容</text>
					<text class="empty-subtitle">试试其他关键词搜索</text>
				</view>

				<!-- 加载更多 -->
				<view v-if="loadingMore" class="loading-more">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 已加载全部 -->
				<view v-if="!hasMore && displayList.length > 0" class="no-more">
					<text class="no-more-text">— 已经到底啦 —</text>
				</view>

				<!-- 安全区域占位 -->
				<view class="safe-area"></view>
			</view>
		</scroll-view>

		<!-- 评论模态框 -->
		<view class="modal-layer" v-if="showCommentModal">
			<view class="modal-mask" @click="closeCommentModal"></view>
			<view class="modal-container comment-modal">
				<view class="modal-header">
					<view class="modal-title-box">
						<text class="modal-title">评论</text>
						<text class="modal-subtitle">{{ currentComments.length }} 条评论</text>
					</view>
					<view class="modal-close-btn" @click="closeCommentModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<scroll-view class="comment-list" scroll-y="true" :show-scrollbar="false">
					<view v-for="comment in currentComments" :key="comment.id" class="comment-item">
						<image 
							:src="comment.avatar" 
							class="comment-avatar" 
							mode="aspectFill"
							:lazy-load="true"
						/>
						<view class="comment-content">
							<view class="comment-header">
								<text class="comment-user">{{ comment.userName }}</text>
								<view class="comment-actions">
									<text class="action-like">♥ 赞</text>
								</view>
							</view>
							<text class="comment-text">{{ comment.content }}</text>
							<view class="comment-footer">
								<text class="comment-time">{{ formatTime(comment.time) }}</text>
								<view class="reply-btn">回复</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<view class="comment-input-area">
					<view class="input-wrapper">
						<input 
							v-model="commentText" 
							class="comment-input" 
							placeholder="留下你的精彩评论..."
							:disabled="!isLoggedIn"
							@confirm="submitComment"
							:focus="commentFocus"
						/>
						<view class="input-actions">
							<text class="input-icon">😊</text>
							<text class="input-icon">📷</text>
						</view>
					</view>
					<button 
						class="submit-btn" 
						:class="{ disabled: !commentText || !isLoggedIn }"
						@click="submitComment"
					>
						{{ isLoggedIn ? '发布' : '请登录' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 登录模态框 -->
		<view class="modal-layer" v-if="showLoginModal">
			<view class="modal-mask" @click="closeLoginModal"></view>
			<view class="modal-container login-modal">
				<view class="login-header">
					<text class="login-icon">🔐</text>
					<text class="login-title">登录后可体验完整功能</text>
				</view>
				<view class="login-content">
					<view class="feature-list">
						<view class="feature-item">
							<text class="feature-icon">💬</text>
							<text class="feature-text">发布评论与互动</text>
						</view>
						<view class="feature-item">
							<text class="feature-icon">⭐</text>
							<text class="feature-text">收藏喜欢的内容</text>
						</view>
						<view class="feature-item">
							<text class="feature-icon">👤</text>
							<text class="feature-text">个性化推荐</text>
						</view>
					</view>
				</view>
				<view class="login-actions">
					<button class="action-btn cancel-btn" @click="closeLoginModal">暂不登录</button>
					<button class="action-btn login-btn" @click="goToLogin">立即登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardViewText from '../../components/cardViewTest.vue';
	
	export default {
		components: {
			cardViewText
		},
		data() {
			return {
				// 顶部导航栏
				newsTabs: ['要闻', '推荐', '关注流', '24小时', '娱乐', '泉州', '台湾', '财经', '八卦'],
				currentTab: 0,
				
				// 搜索相关
				searchKeyword: '',
				searchFocus: false,
				
				// 刷新相关
				refreshing: false,
				showRefreshTip: false,
				updateCount: 0,
				
				// 用户状态
				isLoggedIn: false,
				
				// 评论相关
				showCommentModal: false,
				commentText: '',
				commentFocus: false,
				currentNews: null,
				currentComments: [],
				
				// 登录相关
				showLoginModal: false,
				
				// 天气数据
				weatherData: {
					temperature: '20',
					weather: '阴',
					city: '南安',
					pm25: '30',
					humidity: '66%',
					wind: '东南风2级'
				},
				weatherRefreshText: '刚刚更新',
				lastWeatherUpdate: null,
				
				// 加载更多
				loadingMore: false,
				hasMore: true,
				page: 1,
				pageSize: 5,
				
				// 图片资源
				image: [
					'/static/city1.png',
					'/static/city2.jpg',
					'/static/city3.jpg',
					'/static/city4.jpg',
					'/static/city5.jpg'
				],
				
				// 新闻数据
				datalist: [{
					nId: "T15627",
					title: "14个月从100家开到1000家门店，蜜雪为何买下这家精酿啤酒商",
					isTop: true,
					author: "界面新闻",
					comments: 56,
					time: "2025.10.07",
					showSearch: false,
					mode: 1
				}, {
					nId: "B4485",
					title: "把握历史大势，共创美好未来（观沧海）",
					isTop: false,
					author: "人民日报",
					comments: 1025,
					time: "2025.10.25",
					showSearch: false,
					mode: 2
				}, {
					nId: "B5956",
					title: "黄金还能走多远？卖方高呼'第三浪启动'，230多份研报看多",
					isTop: false,
					author: "新华社",
					comments: 452,
					time: "2025.10.28",
					showSearch: true,
					mode: 2
				}, {
					nId: "B5954",
					title: "奋进'十五五' 续写新篇章｜'人享其行、物畅其流'加快实现 重塑区域经济格局",
					isTop: false,
					author: "央视网",
					comments: 152200,
					time: "2025.10.28",
					showSearch: false,
					mode: 2
				}, {
					nId: "S45895",
					title: "整治网络直播打赏乱象 中央网信办开展为期2个月专项行动",
					isTop: false,
					author: "央视网",
					comments: 59874,
					time: "2025.10.27",
					showSearch: false,
					mode: 2
				}],
				
				// 广告数据
				adList: [{
					id: "AD001",
					type: 'ad',
					title: "加微信交友群，喜欢就聊，找喜欢的人",
					source: "我主良缘文化",
					images: ["city4.jpg", "city5.jpg", "city3.jpg"]
				}],
				
				// 所有数据
				allData: []
			}
		},
		
		computed: {
			// 显示列表（包含分页和搜索过滤）
			displayList() {
				// 如果有搜索关键词，进行过滤
				let list = this.searchKeyword ? this.filteredList : this.paginatedList;
				
				// 在第二项后插入广告
				if (list.length >= 2 && !this.searchKeyword) {
					const newList = [...list];
					newList.splice(2, 0, this.adList[0]);
					return newList;
				}
				
				return list;
			},
			
			// 过滤后的列表
			filteredList() {
				if (!this.searchKeyword.trim()) return [];
				
				const keyword = this.searchKeyword.toLowerCase();
				return this.datalist.filter(item => {
					return item.title.toLowerCase().includes(keyword) ||
						item.author.toLowerCase().includes(keyword);
				});
			},
			
			// 分页列表
			paginatedList() {
				const start = 0;
				const end = this.page * this.pageSize;
				return this.datalist.slice(start, end);
			}
		},
		
		onLoad() {
			this.initData();
			this.initWeatherData();
			this.checkLoginStatus();
		},
		
		onPullDownRefresh() {
			this.onRefresh();
		},
		
		methods: {
			// 初始化数据
			async initData() {
				// 模拟数据加载
				await this.loadMoreData();
			},
			
			// 初始化天气
			async initWeatherData() {
				await this.fetchWeather();
				this.lastWeatherUpdate = new Date();
				this.updateWeatherText();
			},
			
			// 获取天气
			async fetchWeather() {
				return new Promise(resolve => {
					setTimeout(() => {
						const now = new Date();
						const hour = now.getHours();
						let temperature, weather;
						
						if (hour >= 6 && hour < 12) {
							temperature = '22';
							weather = '晴';
						} else if (hour >= 12 && hour < 18) {
							temperature = '25';
							weather = '多云';
						} else {
							temperature = '20';
							weather = '阴';
						}
						
						this.weatherData = {
							...this.weatherData,
							temperature,
							weather,
							pm25: Math.floor(Math.random() * 20 + 30).toString(),
							humidity: Math.floor(Math.random() * 20 + 60) + '%'
						};
						
						resolve();
					}, 300);
				});
			},
			
			// 更新天气文本
			updateWeatherText() {
				if (!this.lastWeatherUpdate) return;
				
				const now = new Date();
				const diffMinutes = Math.floor((now - this.lastWeatherUpdate) / (1000 * 60));
				
				if (diffMinutes < 1) {
					this.weatherRefreshText = '刚刚更新';
				} else if (diffMinutes < 60) {
					this.weatherRefreshText = `${diffMinutes}分钟前`;
				} else {
					const diffHours = Math.floor(diffMinutes / 60);
					this.weatherRefreshText = `${diffHours}小时前`;
				}
			},
			
			// 刷新天气
			async refreshWeather() {
				uni.showLoading({ title: '更新中' });
				
				try {
					await this.fetchWeather();
					this.lastWeatherUpdate = new Date();
					this.updateWeatherText();
					
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: '天气已更新',
							icon: 'success',
							duration: 1500
						});
					}, 300);
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '更新失败',
						icon: 'none',
						duration: 1500
					});
				}
			},
			
			// 检查登录状态
			checkLoginStatus() {
				const userInfo = uni.getStorageSync('currentUser');
				const token = uni.getStorageSync('authToken');
				this.isLoggedIn = !!(userInfo && token);
			},
			
			// 切换标签
			switchTab(index) {
				this.currentTab = index;
				// 这里可以添加对应标签的数据加载
			},
			
			// 搜索输入
			onSearchInput() {
				// 可以添加防抖搜索
			},
			
			// 搜索新闻
			searchNews() {
				if (!this.searchKeyword.trim()) {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none',
						duration: 1500
					});
					return;
				}
			},
			
			// 清空搜索
			clearSearch() {
				this.searchKeyword = '';
				this.searchFocus = false;
			},
			
			// 下拉刷新
			async onRefresh() {
				this.refreshing = true;
				
				try {
					// 刷新天气
					await this.fetchWeather();
					this.lastWeatherUpdate = new Date();
					this.updateWeatherText();
					
					// 刷新数据
					await this.loadMoreData(true);
					
					// 显示刷新提示
					this.updateCount = Math.floor(Math.random() * 3) + 1;
					this.showRefreshTip = true;
					
					setTimeout(() => {
						this.showRefreshTip = false;
						this.refreshing = false;
						uni.stopPullDownRefresh();
						uni.showToast({
							title: '刷新成功',
							icon: 'success',
							duration: 1500
						});
					}, 1500);
					
				} catch (error) {
					this.refreshing = false;
					uni.stopPullDownRefresh();
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1500
					});
				}
			},
			
			// 加载更多
			async loadMore() {
				if (this.loadingMore || !this.hasMore) return;
				
				this.loadingMore = true;
				
				await new Promise(resolve => setTimeout(resolve, 800));
				
				this.page++;
				this.loadingMore = false;
				
				// 检查是否还有更多数据
				if (this.page * this.pageSize >= this.datalist.length) {
					this.hasMore = false;
				}
			},
			
			// 加载数据
			async loadMoreData(refresh = false) {
				if (refresh) {
					this.page = 1;
					this.hasMore = true;
				}
				
				return new Promise(resolve => setTimeout(resolve, 500));
			},
			
			// 点击广告
			handleAdClick(adItem) {
				uni.showModal({
					title: '广告提示',
					content: '此内容为广告推广，是否查看详情？',
					confirmText: '立即查看',
					cancelText: '取消',
					confirmColor: '#007AFF',
					success: (res) => {
						if (res.confirm) {
							console.log('查看广告:', adItem.title);
							// 这里可以跳转到广告页面
						}
					}
				});
			},
			
			// 获取图片URL
			getImageUrl(filename) {
				return `/static/${filename}`;
			},
			
			// 前往新闻详情
			goToNewsDetail(newsItem) {
				// 记录浏览历史
				this.recordBrowseHistory(newsItem);
				
				// 跳转详情页
				uni.navigateTo({
					url: `/pages/news-detail/news-detail?data=${encodeURIComponent(JSON.stringify(newsItem))}`
				});
			},
			
			// 记录浏览历史
			recordBrowseHistory(newsItem) {
				if (!this.isLoggedIn) return;
				
				try {
					const userInfo = uni.getStorageSync('currentUser');
					if (!userInfo) return;
					
					const historyKey = `history_${userInfo.id}`;
					let history = uni.getStorageSync(historyKey) || [];
					
					// 去重
					history = history.filter(item => item.nId !== newsItem.nId);
					
					// 添加到开头
					history.unshift({
						...newsItem,
						viewTime: new Date().toISOString()
					});
					
					// 最多保存50条
					if (history.length > 50) {
						history = history.slice(0, 50);
					}
					
					uni.setStorageSync(historyKey, history);
				} catch (error) {
					console.error('记录历史失败:', error);
				}
			},
			
			// 处理评论
			handleComment(item) {
				if (!this.isLoggedIn) {
					this.showLoginModal = true;
					return;
				}
				
				this.currentNews = item;
				this.loadComments(item.nId);
				this.showCommentModal = true;
				setTimeout(() => {
					this.commentFocus = true;
				}, 300);
			},
			
			// 加载评论
			loadComments(newsId) {
				// 模拟评论数据
				this.currentComments = [
					{
						id: 1,
						userName: '科技爱好者',
						avatar: '/static/avatars/avatar1.png',
						content: '这篇报道很有深度，分析得非常到位！',
						time: '2025-10-28T10:30:00'
					},
					{
						id: 2,
						userName: '财经观察员',
						avatar: '/static/avatars/avatar2.png',
						content: '市场趋势分析得很准确，值得参考。',
						time: '2025-10-28T09:15:00'
					},
					{
						id: 3,
						userName: '普通读者',
						avatar: '/static/avatars/avatar3.png',
						content: '涨知识了，谢谢分享！',
						time: '2025-10-28T08:45:00'
					}
				];
			},
			
			// 提交评论
			submitComment() {
				if (!this.isLoggedIn) {
					this.showLoginModal = true;
					return;
				}
				
				if (!this.commentText.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none',
						duration: 1500
					});
					return;
				}
				
				const userInfo = uni.getStorageSync('currentUser');
				const newComment = {
					id: Date.now(),
					userName: userInfo.username || '匿名用户',
					avatar: userInfo.avatar || '/static/avatars/default.png',
					content: this.commentText,
					time: new Date().toISOString()
				};
				
				// 添加到评论列表
				this.currentComments.unshift(newComment);
				
				// 更新新闻评论数
				const index = this.datalist.findIndex(item => item.nId === this.currentNews.nId);
				if (index !== -1) {
					this.datalist[index].comments++;
				}
				
				// 清空输入框
				this.commentText = '';
				this.commentFocus = false;
				
				// 显示成功提示
				uni.showToast({
					title: '评论成功',
					icon: 'success',
					duration: 1500
				});
			},
			
			// 处理关注
			handleFollow(item) {
				if (!this.isLoggedIn) {
					this.showLoginModal = true;
					return;
				}
				
				// 这里可以添加关注逻辑
				uni.showToast({
					title: '已关注',
					icon: 'success',
					duration: 1500
				});
			},
			
			// 关闭评论框
			closeCommentModal() {
				this.showCommentModal = false;
				this.commentText = '';
				this.commentFocus = false;
				this.currentComments = [];
			},
			
			// 关闭登录框
			closeLoginModal() {
				this.showLoginModal = false;
			},
			
			// 前往登录
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				this.closeLoginModal();
			},
			
			// 格式化时间
			formatTime(timeString) {
				const time = new Date(timeString);
				const now = new Date();
				const diffMs = now - time;
				const diffMins = Math.floor(diffMs / 60000);
				const diffHours = Math.floor(diffMins / 60);
				const diffDays = Math.floor(diffHours / 24);
				
				if (diffMins < 1) return '刚刚';
				if (diffMins < 60) return `${diffMins}分钟前`;
				if (diffHours < 24) return `${diffHours}小时前`;
				if (diffDays < 7) return `${diffDays}天前`;
				
				return time.getMonth() + 1 + '月' + time.getDate() + '日';
			}
		}
	}
</script>

<style scoped lang="scss">
.news-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

/* 导航栏样式 - 修复文字显示不全问题 */
.nav-wrapper {
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(20px);
	background: rgba(255, 255, 255, 0.95);
	width: 100%;
	padding: 0 10rpx;
}

.nav-scroll {
	white-space: nowrap;
	height: 88rpx;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	display: flex;
	align-items: center;
}

.nav-tabs {
	display: inline-flex;
	height: 100%;
	padding: 0 10rpx;
	align-items: center;
	flex-wrap: nowrap;
}

.nav-item {
	position: relative;
	padding: 0 18rpx; /* 减少左右内边距 */
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 防止压缩 */
}

.nav-text {
	font-size: 28rpx;
	font-weight: 400;
	color: #666;
	line-height: 88rpx;
	transition: all 0.3s ease;
	white-space: nowrap;
	display: block;
	text-align: center;
	width: 100%;
	padding: 0 4rpx;
	box-sizing: border-box;
}

.nav-item.active .nav-text {
	color: #007AFF;
	font-weight: 600;
	font-size: 30rpx;
}

.nav-indicator {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: linear-gradient(90deg, #007AFF, #0099FF);
	border-radius: 2rpx;
	animation: indicatorSlide 0.3s ease;
}

@keyframes indicatorSlide {
	from { opacity: 0; transform: translateX(-50%) scaleX(0.5); }
	to { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

/* 顶部区域 */
.top-section {
	padding: 24rpx 30rpx 20rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.weather-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 30rpx;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.2);
	position: relative;
	overflow: hidden;
}

.weather-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 200rpx;
	height: 200rpx;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
}

.weather-left {
	display: flex;
	align-items: center;
	gap: 30rpx;
}

.temperature-box {
	display: flex;
	flex-direction: column;
}

.temperature {
	font-size: 64rpx;
	font-weight: 700;
	line-height: 1;
}

.weather-status {
	font-size: 24rpx;
	opacity: 0.9;
	margin-top: 8rpx;
}

.location-box {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.location, .air-quality {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.location-icon, .air-icon {
	font-size: 24rpx;
}

.city-name, .pm-text {
	font-size: 24rpx;
	opacity: 0.9;
}

.weather-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 20rpx;
}

.refresh-info {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20rpx;
	backdrop-filter: blur(10px);
}

.refresh-time {
	font-size: 20rpx;
	opacity: 0.9;
}

.refresh-icon {
	font-size: 20rpx;
	animation: rotateRefresh 2s linear infinite;
}

@keyframes rotateRefresh {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.weather-extra {
	display: flex;
	gap: 16rpx;
}

.extra-item {
	font-size: 20rpx;
	opacity: 0.8;
}

.search-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.search-wrapper {
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 16rpx;
	padding: 0 24rpx;
	height: 72rpx;
	transition: all 0.3s ease;
}

.search-wrapper:focus-within {
	background: #ffffff;
	border: 1px solid #007AFF;
	box-shadow: 0 0 0 3rpx rgba(0, 122, 255, 0.1);
}

.search-icon-wrapper {
	margin-right: 16rpx;
}

.search-icon {
	font-size: 28rpx;
	color: #999;
}

.search-input {
	flex: 1;
	height: 100%;
	font-size: 28rpx;
	color: #333;
}

.search-placeholder {
	color: #999;
	font-size: 28rpx;
}

.clear-wrapper {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clear-btn {
	font-size: 36rpx;
	color: #ccc;
	line-height: 1;
}

.clear-btn:active {
	color: #999;
}

/* 刷新提示 */
.refresh-tip {
	background: linear-gradient(90deg, #34c759, #30d158);
	padding: 16rpx 30rpx;
	animation: slideDown 0.4s ease-out;
}

.tip-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
}

.tip-icon {
	font-size: 24rpx;
	color: white;
	animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4rpx); }
}

.tip-text {
	font-size: 24rpx;
	color: white;
	font-weight: 500;
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 内容区域 */
.content-scroll {
	height: calc(100vh - 320rpx);
}

.content-list {
	padding: 0 30rpx 30rpx;
}

.list-item {
	margin-bottom: 20rpx;
	animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 搜索提示 */
.search-tips {
	margin-top: 20rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
	border-radius: 16rpx;
	border-left: 4rpx solid #007AFF;
}

.tips-header {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 20rpx;
}

.tips-title {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 20rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	border: 1px solid rgba(0, 122, 255, 0.1);
	transition: all 0.2s ease;
}

.tag-item:active {
	background: rgba(0, 122, 255, 0.05);
	transform: scale(0.98);
}

.tag-icon {
	font-size: 20rpx;
	color: #007AFF;
}

.tag-text {
	font-size: 24rpx;
	color: #007AFF;
	font-weight: 500;
}

/* 广告卡片 */
.advertisement-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.advertisement-card:active {
	transform: scale(0.995);
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.ad-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 24rpx;
	background: rgba(0, 122, 255, 0.03);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ad-badge {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.ad-label {
	font-size: 20rpx;
	color: #ffffff;
	background: linear-gradient(90deg, #FF9500, #FF7043);
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	font-weight: 500;
}

.ad-sponsor {
	font-size: 22rpx;
	color: #666;
}

.ad-action {
	display: flex;
	align-items: center;
}

.action-btn {
	font-size: 20rpx;
	color: #007AFF;
	padding: 8rpx 16rpx;
	background: rgba(0, 122, 255, 0.1);
	border-radius: 12rpx;
}

.ad-content {
	padding: 24rpx;
}

.ad-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 24rpx;
	font-weight: 500;
	display: block;
}

.ad-images {
	display: flex;
	justify-content: space-between;
	gap: 12rpx;
}

.ad-image {
	flex: 1;
	height: 180rpx;
	border-radius: 12rpx;
	background: #f8f9fa;
}

.ad-footer {
	padding: 20rpx 24rpx;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	background: rgba(0, 122, 255, 0.02);
	text-align: center;
}

.footer-text {
	font-size: 22rpx;
	color: #007AFF;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 0;
}

.empty-icon {
	font-size: 80rpx;
	color: #ccc;
	margin-bottom: 40rpx;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(0.95); }
}

.empty-title {
	font-size: 32rpx;
	color: #999;
	font-weight: 500;
	margin-bottom: 20rpx;
}

.empty-subtitle {
	font-size: 24rpx;
	color: #ccc;
}

/* 加载更多 */
.loading-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #f0f0f0;
	border-top-color: #007AFF;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 24rpx;
	color: #999;
}

.no-more {
	text-align: center;
	padding: 40rpx 0;
}

.no-more-text {
	font-size: 24rpx;
	color: #ccc;
}

.safe-area {
	height: env(safe-area-inset-bottom);
}

/* 模态框层 */
.modal-layer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}

.modal-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4rpx);
	animation: fadeIn 0.3s ease-out;
}

.modal-container {
	position: absolute;
	background: #ffffff;
	border-radius: 32rpx 32rpx 0 0;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	max-height: 85vh;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 评论模态框 */
.comment-modal {
	bottom: 0;
	left: 0;
	right: 0;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 32rpx 20rpx;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-title-box {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.modal-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.modal-subtitle {
	font-size: 24rpx;
	color: #999;
}

.modal-close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f8f9fa;
}

.close-icon {
	font-size: 40rpx;
	color: #666;
	line-height: 1;
}

.comment-list {
	flex: 1;
	padding: 20rpx 32rpx;
}

.comment-item {
	display: flex;
	padding: 24rpx 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.comment-item:last-child {
	border-bottom: none;
}

.comment-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	flex-shrink: 0;
	background: #f8f9fa;
}

.comment-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.comment-user {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
}

.comment-actions {
	display: flex;
	align-items: center;
}

.action-like {
	font-size: 24rpx;
	color: #999;
	padding: 8rpx 16rpx;
	background: #f8f9fa;
	border-radius: 20rpx;
}

.comment-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 16rpx;
}

.comment-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.comment-time {
	font-size: 22rpx;
	color: #999;
}

.reply-btn {
	font-size: 24rpx;
	color: #007AFF;
	padding: 8rpx 20rpx;
	background: rgba(0, 122, 255, 0.1);
	border-radius: 20rpx;
}

.comment-input-area {
	display: flex;
	align-items: center;
	padding: 20rpx 32rpx 40rpx;
	gap: 20rpx;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	background: #f8f9fa;
}

.input-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 0 24rpx;
	height: 72rpx;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.comment-input {
	flex: 1;
	height: 100%;
	font-size: 28rpx;
	color: #333;
}

.input-actions {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-left: 16rpx;
}

.input-icon {
	font-size: 28rpx;
	color: #999;
}

.submit-btn {
	width: 140rpx;
	height: 72rpx;
	background: linear-gradient(90deg, #007AFF, #0099FF);
	color: white;
	border: none;
	border-radius: 20rpx;
	font-size: 28rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submit-btn.disabled {
	background: linear-gradient(90deg, #ccc, #ddd);
	color: #999;
}

/* 登录模态框 */
.login-modal {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 600rpx;
	border-radius: 32rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.login-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 40rpx 40rpx;
	text-align: center;
}

.login-icon {
	font-size: 80rpx;
	margin-bottom: 32rpx;
	animation: bounce 2s ease-in-out infinite;
}

.login-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	line-height: 1.4;
}

.login-content {
	padding: 0 40rpx 40rpx;
}

.feature-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.feature-icon {
	font-size: 40rpx;
	width: 60rpx;
	text-align: center;
}

.feature-text {
	font-size: 28rpx;
	color: #666;
}

.login-actions {
	display: flex;
	gap: 20rpx;
	padding: 0 40rpx 40rpx;
}

.action-btn {
	flex: 1;
	height: 88rpx;
	border: none;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.action-btn:active {
	transform: scale(0.98);
}

.cancel-btn {
	background: #f8f9fa;
	color: #666;
}

.login-btn {
	background: linear-gradient(90deg, #007AFF, #0099FF);
	color: white;
	box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
}
</style>